// 导入基础库
import { connect,history  } from 'umi'
// 导入UI组件
import { Popover } from 'antd';
import css from './table.less'

const tables = (props) => {
    const { title, cols, data, width, height, border, edit, link } = props

    const onScroll = e => {
        var thead = e.target.parentNode.children[0]
        thead.scrollLeft = e.target.scrollLeft
    }

    const onClick = _id => {
        if (link) {
            history.push(_id )
        }
    }

    return (
        <div className={css.table_box} id="table">
            {title ? <h1>{title}</h1> : null}
            <div className={css.table_header_box} id='theader'>
                <table style={{ width: width }} border={border ? 1 : 0}>
                    <thead>
                        <tr>
                            {cols.map((col, cid) =>
                                <td key={cid} style={{ width: col.width ? col.width : width / cols.length }}>
                                    {col.title}
                                </td>
                            )}
                        </tr>
                    </thead>
                </table>
            </div>
            <div className={css.table_body_box} style={{ height: height }} onScroll={onScroll}>
                <table style={{ width: width }} border={border ? 1 : 0}>
                    <tbody>
                        {data.map((rows, rid) =>
                            <tr key={rid} id={rid} onClick={() => onClick(rows._id)}>
                                {cols.map((col, cid) =>
                                    <td key={cid} style={{ width: col.width ? col.width : width / cols.length }}>
                                        {rows[col.key] ?
                                            typeof rows[col.key] !== 'object' ?
                                                <Popover content={<h1>{col.title}： {rows[col.key]}</h1>} trigger="hover">
                                                    <p>{rows[col.key]}</p>
                                                </Popover>
                                                :
                                                rows[col.key].map((i, iid) =>
                                                    <Popover key={iid} content={<h1>{col.title}： {i}</h1>} trigger="hover">
                                                        <p>{i}</p>
                                                    </Popover>
                                                )
                                            : null
                                        }
                                    </td>
                                )}
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default connect(({ global }) => ({ global }))(tables)